<template>
  <view class="login-container">
    <!-- 背景装饰 -->
    <view class="bg-decoration">
      <view class="circle circle-1"></view>
      <view class="circle circle-2"></view>
      <view class="circle circle-3"></view>
    </view>

    <!-- 主要内容 -->
    <view class="main-content">
      <!-- Logo区域 -->
      <view class="logo-section">
        <image
          class="logo"
          src="/static/VK_MDY_lightmode.png"
          mode="aspectFit"
        />
        <text class="app-name">VKG AI</text>
        <text class="app-slogan">智能文档问答助手</text>
      </view>

      <!-- 登录表单 -->
      <view class="login-form">
        <view class="form-header">
          <text class="form-title">欢迎回来</text>
          <text class="form-subtitle">请登录您的账户</text>
        </view>

        <view class="form-group">
          <view class="input-wrapper">
            <text class="input-icon">👤</text>
            <input
              v-model="username"
              class="form-input"
              type="text"
              :placeholder="'请输入用户名'"
              :disabled="loading"
            />
          </view>
        </view>

        <view class="form-group">
          <view class="input-wrapper">
            <text class="input-icon">🔒</text>
            <input
              v-model="password"
              class="form-input"
              type="password"
              :placeholder="'请输入密码'"
              :disabled="loading"
            />
          </view>
        </view>

        <view class="form-options">
          <label class="remember-me">
            <uni-checkbox
              :checked="rememberMe"
              @change="(e) => (rememberMe = e.detail.value)"
              class="checkbox"
            />
            <text class="checkbox-text">记住我</text>
          </label>
        </view>

        <button
          class="login-btn"
          :class="{ 'login-btn-loading': loading }"
          :disabled="loading || !username.trim() || !password.trim()"
          @click="handleLogin"
        >
          <text v-if="!loading" class="btn-text">登录</text>
          <view v-else class="loading-spinner">
            <view class="spinner"></view>
            <text class="loading-text">登录中...</text>
          </view>
        </button>

        <view class="divider">
          <view class="divider-line"></view>
          <text class="divider-text">或者</text>
          <view class="divider-line"></view>
        </view>

        <!-- 游客登录按钮 -->
        <button
          class="guest-login-btn"
          @click="handleGuestLogin"
          :disabled="loading"
        >
          <text class="guest-icon">👤</text>
          <text class="guest-text">游客登录</text>
        </button>

        <view class="register-link">
          <text class="register-text">还没有账户？</text>
          <text class="register-btn" @click="goToRegister">立即注册</text>
        </view>
      </view>
    </view>

    <!-- 底部信息 -->
    <view class="footer">
      <text class="footer-text">© 2024 VKG AI. 保留所有权利</text>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { authAPI } from "@/api/index";
import { useUserStore } from "@/stores/user";

// 响应式数据
const username = ref("");
const password = ref("");
const rememberMe = ref(false);
const loading = ref(false);

// 调试信息
console.log("登录页面初始化，数据状态:", {
  username: username.value,
  password: password.value,
  rememberMe: rememberMe.value,
  loading: loading.value,
});

// 用户状态管理
const userStore = useUserStore();

// 生命周期
onMounted(() => {
  // 检查是否已经登录
  if (userStore.isLoggedIn()) {
    uni.reLaunch({ url: "/pages/index/index" });
    return;
  }

  // 尝试恢复记住的用户名
  const savedUsername = uni.getStorageSync("rememberedUsername");
  if (savedUsername) {
    username.value = savedUsername;
    rememberMe.value = true;
  }
});

// 处理登录
const handleLogin = async () => {
  if (!username.value.trim() || !password.value.trim()) {
    uni.showToast({
      title: "请输入用户名和密码",
      icon: "none",
    });
    return;
  }

  try {
    loading.value = true;

    const response = await userStore.login(
      username.value,
      password.value,
      rememberMe.value
    );

    if (response) {
      // 记住用户名
      if (rememberMe.value) {
        uni.setStorageSync("rememberedUsername", username.value);
      } else {
        uni.removeStorageSync("rememberedUsername");
      }

      // 跳转到主页
      uni.reLaunch({ url: "/pages/index/index" });
    }
  } catch (error) {
    console.error("登录失败:", error);
    uni.showToast({
      title: error.message || "登录失败",
      icon: "none",
    });
  } finally {
    loading.value = false;
  }
};

// 游客登录
const handleGuestLogin = async () => {
  try {
    loading.value = true;

    // 创建游客用户信息
    const guestUser = {
      username: `guest_${Date.now()}`,
      isGuest: true,
      loginTime: new Date().toISOString(),
    };

    // 保存游客信息到本地存储
    uni.setStorageSync("guestUser", guestUser);

    // 设置游客登录状态
    userStore.setGuestMode(true);

    uni.showToast({
      title: "游客登录成功",
      icon: "success",
    });

    // 跳转到主页
    setTimeout(() => {
      uni.reLaunch({ url: "/pages/index/index" });
    }, 1000);
  } catch (error) {
    console.error("游客登录失败:", error);
    uni.showToast({
      title: "游客登录失败",
      icon: "none",
    });
  } finally {
    loading.value = false;
  }
};

// 跳转到注册页面
const goToRegister = () => {
  uni.navigateTo({ url: "/pages/register/index" });
};
</script>

<style lang="scss" scoped>
/* 全局样式，去掉滚动条 */
:deep(body) {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

:deep(html) {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

:deep(#app) {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.login-container {
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 确保页面填满整个浏览器 */
  width: 100vw;
  margin: 0;
  padding: 0;
}

.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: float 6s ease-in-out infinite;
}

.circle-1 {
  width: 200rpx;
  height: 200rpx;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.circle-2 {
  width: 150rpx;
  height: 150rpx;
  top: 60%;
  right: 15%;
  animation-delay: 2s;
}

.circle-3 {
  width: 100rpx;
  height: 100rpx;
  bottom: 20%;
  left: 20%;
  animation-delay: 4s;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
  z-index: 1;
  /* 确保内容填满整个容器 */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.logo-section {
  text-align: center;
  margin-bottom: 80rpx;
}

.logo {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 30rpx;
}

.app-name {
  font-size: 64rpx;
  font-weight: bold;
  color: white;
  display: block;
  margin-bottom: 20rpx;
}

.app-slogan {
  font-size: 32rpx;
  color: rgba(255, 255, 255, 0.8);
}

.login-form {
  width: 100%;
  max-width: 600rpx;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  border-radius: 30rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
  border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.form-header {
  text-align: center;
  margin-bottom: 50rpx;
}

.form-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 15rpx;
}

.form-subtitle {
  font-size: 28rpx;
  color: #666;
}

.form-group {
  margin-bottom: 30rpx;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border-radius: 20rpx;
  padding: 0 30rpx;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;

  &:focus-within {
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
  }
}

.input-icon {
  font-size: 36rpx;
  margin-right: 20rpx;
  color: #999;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40rpx;
  height: 40rpx;
}

.form-input {
  flex: 1;
  height: 100rpx;
  background: transparent;
  border: none;
  outline: none;
  font-size: 32rpx;
  color: #333;

  &::placeholder {
    color: #999;
  }
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.remember-me {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox {
  margin-right: 15rpx;
  transform: scale(0.8);
  /* 确保 switch 组件正确显示 */
  display: block;
}

.checkbox-text {
  font-size: 28rpx;
  color: #666;
}

.login-btn {
  width: 100%;
  height: 100rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 25rpx;
  color: white;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 40rpx;
  transition: all 0.3s ease;

  &:hover:not(:disabled) {
    transform: translateY(-2rpx);
    box-shadow: 0 10rpx 30rpx rgba(102, 126, 234, 0.3);
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

.login-btn-loading {
  background: #ccc;
}

.btn-text {
  color: white;
}

.loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
}

.spinner {
  width: 30rpx;
  height: 30rpx;
  border: 3rpx solid rgba(255, 255, 255, 0.3);
  border-top: 3rpx solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  color: white;
  font-size: 28rpx;
}

.divider {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}

.divider-line {
  flex: 1;
  height: 1rpx;
  background: #e0e0e0;
}

.divider-text {
  padding: 0 30rpx;
  font-size: 28rpx;
  color: #999;
}

/* 游客登录按钮样式 */
.guest-login-btn {
  width: 100%;
  height: 80rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 20rpx;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15rpx;
  margin-bottom: 40rpx;
  transition: all 0.3s ease;

  &:hover:not(:disabled) {
    border-color: #667eea;
    transform: translateY(-2rpx);
    box-shadow: 0 5rpx 15rpx rgba(102, 126, 234, 0.2);
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

.guest-icon {
  font-size: 36rpx;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guest-text {
  font-size: 28rpx;
  color: #333;
}

.register-link {
  text-align: center;
}

.register-text {
  font-size: 28rpx;
  color: #666;
}

.register-btn {
  font-size: 28rpx;
  color: #667eea;
  margin-left: 10rpx;
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}

.footer {
  padding: 40rpx;
  text-align: center;
  z-index: 1;
}

.footer-text {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.6);
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .main-content {
    padding: 20rpx;
  }

  .login-form {
    padding: 40rpx 30rpx;
  }

  .app-name {
    font-size: 56rpx;
  }

  .form-title {
    font-size: 40rpx;
  }
}

/* 小程序和APP端适配 */
/* #ifdef MP-WEIXIN || APP-PLUS */
.login-container {
  padding-top: var(--status-bar-height);
}

.main-content {
  padding-top: calc(40rpx + var(--status-bar-height));
}
/* #endif */

/* H5端适配 */
/* #ifdef H5 */
.login-container {
  height: 100vh;
  overflow: hidden;
}
/* #endif */
</style>
